<template>
  <el-row>
   <div v-for="item in data" @click="to(item)" class="match-item" :key="item.id">
      <e-img-match :src="item.logoUrl " width="80" height="80" class="match-img" />
      <h4 class="m_name hidden" :title="item.matchName">
        {{item.matchName}}
      </h4>
      <match-status :status="item.status" ></match-status>
    </div>
  </el-row>
</template>

<script>
import MatchStatus from './MatchStatus'
import { mapGetters } from 'vuex'
export default {
  components: {
    MatchStatus
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    ...mapGetters({
      global: 'global'
    })
  },
  data () {
    return {}
  },
  methods: {
    to (item) {
      let url = (item.status === 7 || item.status === 8) ? '/history/detail/index' : '/race/detail/index'
      this.$router.push({
        path: url,
        query: {
          id: item.id,
          isRun: item.matchType === 3006,
          tasktype: [20002, 20004, 20013, 20015, 20016, 20017].indexOf(item.joinRequire) > -1 ? 'team' : 'single'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .match-item{
    float:left;
    width: 20%;
    text-align:center;
    padding:0 15px 20px 15px;
    cursor: pointer;
    h4{
      margin:10px 0px;
      max-width: 100%;
      line-height: 16px;
      height: 16px;
      overflow: hidden;
    }
    .match-img{
      border-radius: 50%;
    }
  }
</style>
